<template>
  <div>
    <el-form
      :model="dimension"
      label-width="80px"
      label-position="left"
      style="width: 70%"
      :rules="rules"
      ref="dimensionForm"
    >
      <el-form-item label="编码" prop="code">
        <el-input v-model="dimension.code" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="dimension.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="数据来源" prop="dataSourceType">
        <el-select v-model="dimension.dataSourceType" placeholder="数据源">
          <el-option
            v-for="(item, index) in dataSourceTypes"
            :key="index"
            :label="item.text"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="标签"
        prop="tagId"
        v-if="dimension.dataSourceType == $enums.dataSourceType.tag.value"
      >
        <tag-select v-model="dimension.tagId" autocomplete="off"></tag-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel" size="small">取消</el-button>
      <el-button type="primary" @click="handleSave" size="small"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script>
import { getDimension, addDimension, updateDimension } from "@/api/account";
import tagSelect from "@/components/Select/tagSelect.vue";
export default {
  components: {
    tagSelect,
  },
  data() {
    return {
      dimension: {
        id: null,
        code: null,
        name: null,
        dataSourceType: null,
        tagId: null,
      },
      rules: {
        code: [{ required: true, message: "请填写编码", trigger: "blur" }],
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
        dataSourceType: [
          { required: true, message: "请选择数据来源", trigger: "blur" },
        ],
        tagId: [{ validator: this.tagIdValidator, trigger: "blur" }],
      },
    };
  },
  methods: {
    getData() {
      if (!this.id) return;
      getDimension(this.id).then((res) => {
        this.dimension = res;
      });
    },
    handleSave() {
      this.$refs.dimensionForm.validate((valid) => {
        if (valid) {
          this.saveData();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleCancel() {
      this.$emit("close");
    },
    saveData() {
      if (this.id)
        updateDimension(this.dimension).then((res) => {
          this.$emit("success", res);
        });
      else
        addDimension(this.dimension).then((res) => {
          this.$emit("success", res);
        });
    },
    tagIdValidator(rule, value, callback) {
      if (
        this.dimension.dataSourceType == this.$enums.dataSourceType.tag.value &&
        !this.dimension.tagId
      ) {
        callback(new Error("核算维度数据来源为标签时，标签不能为空"));
      } else {
        callback();
      }
    },
  },
  mounted() {
    this.getData();
  },
  computed: {
    dataSourceTypes() {
      return this.$enums.dataSourceType.array;
    },
  },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
